<template>
  <div>
    <el-dialog :visible.sync="shwo" :title="{add:'添加部门',bjm:'编辑部门'}[naemmac]" @close="quxiao">
      {{ form }}
      {{ naemmac }}
      <el-form ref="form" label-width="120px" :model="form" :rules="rules">
        <el-form-item label="部门名称" prop="name">
          <el-input v-model.trim="form.name" placeholder="1-50字符" />
        </el-form-item>

        <el-form-item label="部门编码" prop="code">
          <el-input v-model.trim="form.code" placeholder="1-50字符" />
        </el-form-item>

        <el-form-item label="部门负责人" prop="manager">
          <el-input v-model.trim="form.manager" placeholder="1-50字符" style="width: 100px;" />
        </el-form-item>

        <el-form-item label="部门介绍" prop="introduce">
          <el-input v-model.trim="form.introduce" rows="3" type="textarea" placeholder="1-50字符" />
        </el-form-item>
      </el-form>

      <template slot="footer">
        <div>
          <el-button @click="quxiao()"> 取消</el-button>
          <el-button type="primary" @click="qr">确认</el-button>
        </div>
      </template>
    </el-dialog>
  </div>

</template>

<script>
import { companydepartmentadd, companydepartmentid } from '@/api/zuzhujiagou'

export default {

  props: {
    list: {
      type: Array,
      required: true
    }
  },

  data() {
    return {

      // 添加表示
      naemmac: 'add',
      shwo: false,
      form: {
        name:	'',
        code: '',
        manager: '',
        introduce: '',
        pid: ''
      },
      rules: {
        name: [
          { required: true, message: '清输入部门名称', trigger: 'change' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' },
          { validator: (rule, value, callback) => {
            if (this.naemmac === 'add') {
              // 因为每次点击添加部门都传入了父级的id(根据id= 子集的pid，用过滤)
            // 找出当前pid所有子集，
              const a = this.list.filter(v => {
                // 排除父级
                return v.pid === this.form.pid
              })

              // 在通过every 找出 当前pid的数据的name是否与当前的name一致

              console.log(a, 33333333)
              const c = a.every(v => v.name !== this.form.name)

              c ? callback() : callback(new Error('不能重复'))
            } else if (this.naemmac === 'bjm') {
              const a = this.list.filter(v => {
                return v.pid === this.form.pid && v.name !== this.form.name
              })

              // 在通过every 找出 当前pid的数据的name是否与当前的name一致

              console.log(a, 33333333)
              const c = a.every(v => v.name !== this.form.name)

              c ? callback() : callback(new Error('不能重复'))
            }
          } }
        ],
        code: [
          { required: true, message: '部门编码', trigger: 'change' },
          { validator: (rule, value, callback) => {
            let aaa
            if (this.naemmac === 'add') {
              // 根据需求，每个code值 都不能重复，要提示
            // 利用every 判断每个值是否补等于value 返回true
            // 在判断等于true就是没有重复通过
              aaa = this.list.every(v => v.code !== value)
            } else if (this.naemmac === 'bjm') {
              // 根据需求，每个code值都不能重复，要提示
              // 利用every 判断每个值是否补等于value 返回true
              // 在判断等于true就是没有重复通过

              const xlist = this.list.filter(v => {
              // 编辑时将移除自己code

                return v.id !== this.form.id
              })

              aaa = xlist.every(v => v.code !== value)
              console.log(aaa)
            }

            aaa ? callback() : callback(new Error('部门编码已存在'))
          } }
        ],
        manager: [
          { required: true, message: '部门负责人', trigger: 'change' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ],
        introduce: [
          { required: true, message: '部门介绍', trigger: 'change' },
          { min: 1, max: 50, message: '长度在 1 到 50 个字符', trigger: 'change' }
        ]

      }

    }
  },

  methods: {
    async qr() {
      try {
        if (this.naemmac === 'add') {
          await this.$refs.form.validate()

          // 请求添加部门数据
          const res = await companydepartmentadd(this.form)

          // 子组件通知父组件调用刷新
          this.$emit('a')

          // 关闭弹出框-为什么表单重置了
          // 因为取消弹出框，设置了关闭弹出框就会重置表单
          // 只要是弹出框关闭了，就会重置表单
          this.shwo = false

          console.log(res)
        } else {
          await this.$refs.form.validate()
          await companydepartmentid(this.form)
          this.shwo = false

          this.$emit('a')
        }
      } catch (error) {
        console.log(error)
      }
    },
    quxiao() {
      this.shwo = false

      this.$refs.form.resetFields()

      // 为什么还要在这里写重置表单
      // 因为resetFields()这个方法这是重置到初始值
      // 如果先点击了编辑初始就是编辑回显的内容
      this.form = {
        name:	'',
        code: '',
        manager: '',
        introduce: '',
        pid: ''
      }
      console.log('清空', this.form)
    }
  }

}
</script>

<style>

</style>
